<template>
  <view class="base">
    <view class="card result">
      <view class="title bold">
		  <div class="star" :class="iconClass">
		    <image :src="iconStar" class="icon" />
		    {{ radarData ? radarData.score || "-" : "-" }}
		    <text class="star-text">分</text>
		  </div>
        <view class="text">结论和建议(参考)：</view>
        
      </view>
      <view
        class="content"
        :class="{ active: expand }"
        id="equimentBaseContent"
      >
        <text class="bold">结论：</text>
        {{ radarData ? radarData.conclusion || "" : "" }}
        <!-- 过滤器压差已经临界正常运行标准值，过滤器滤芯将会存在故障；低压主泵运行，低压供油压力值低于运行标准值，建议联系设备维保人员及时更换过滤器，保证设备正常运行。 -->
      </view>
     <!-- <view
        class="expand"
        :class="{ active: expand }"
        @click="onClickExpand"
        v-show="showExpand"
      >
        {{ expand ? "收起" : "展开" }}
        <image :src="imgBaseUrlV2 + 'arrow_down.png'" mode="" class="icon" />
      </view> -->
    </view>
    <view class="card result" v-if="false && warningList.length">
      <view
        class="content"
        :class="{ active: expand }"
        id="equimentBaseContent"
      >
        <text v-for="(item, index) in warningList" :key="item.key"
          >{{ item.message }}
          {{ index !== warningList.length - 1 ? "" : "" }}</text
        >请留意
      </view>
      <view
        class="expand"
        :class="{ active: expand }"
        @click="onClickExpand"
        v-show="warningList.length > 3"
      >
        {{ expand ? "收起" : "展开" }}
        <image :src="imgBaseUrlV2 + 'arrow_down.png'" mode="" class="icon" />
      </view>
    </view>

    <template v-if="indicators.length">
      <view class="title">
        异常指标<label class="color-danger">{{ indicators.length }}项</label>
      </view>
      <view class="indicator">
        <view class="item card" v-for="item in indicators" :key="item.id">
          <view
            class="num"
            :class="{
              danger: item.index > 0,
              success: item.index < 0,
            }"
          >
            {{ item.new_value }}{{ item.unit }}
            <image
              :src="imgBaseUrlV2 + 'yujing.png'"
              mode=""
              class="icon"
              v-if="item.field_type != 'boolean' && item.index"
            />
          </view>
          <view class="name">
            <view class="desc"
              >参考值{{ item.set_value || item.default_value
              }}{{ item.unit }}</view
            >
            <view class="display_name">{{ item.display_name }}</view>
          </view>
        </view>
      </view>
    </template>

    <view class="no-data-box" v-else-if="false">
      <NoData
        imageStyle="width:112px;"
        status="deviceGood"
        title="设备运行状况良好"
      >
      </NoData>
    </view>
    <!-- v-if="false" -->
    <view class="card chart" id="equiment-detail-chart">
      <l-echart ref="chart"></l-echart>
    </view>
  </view>
</template>

<script>
import { imgBaseUrlV2 } from "@/common/config";
import * as echarts from "@/pageA/lime-echart/echarts";
import lEchart from "@/pageA/lime-echart/index";
import {
  getDeviceMonitoringData,
  getDeviceRadarData,
} from "@/common/api/equipment";
import NoData from "@/components/public/noData/noData";
import { getDeviceWarningValue } from "@/common/api/equipment";
import CircleProgress from "@/components/public/circle-progress/circle-progress";
export default {
  components: {
    lEchart,
    NoData,
    CircleProgress,
  },
  props: {
    dataInfo: Object,
    radarData: {
      type: [Object],
      default: null,
    },
    device_id: {
      type: [String, Number],
      default: "",
    },
  },
  data() {
    let center;
    // #ifdef H5
    center = ["50%", "55%"];
    // #endif;
    // #ifndef H5
    center = ["50%", "middle"];
    // #endif;
    return {
      showExpand: false,
      expand: false,
      imgBaseUrlV2,
      indicators: [
        // {
        //   id: 1,
        //   value: 56.2,
        //   standard: 46,
        //   name: "温度",
        //   affix: "°C",
        //   up: true,
        // },
      ],
      option: {
        color: ["#3F7DFF"],
        title: {
          show: false,
        },
        legend: {
          show: false,
          data: [],
        },
        padding: 20,
        radar: [
          {
            center,
            indicator: [
              { text: "基础工况", max: 5, status: 1 },
              { text: "油液指标", max: 5, status: 1 },
              { text: "算法告警", max: 5, status: 1 },
              { text: "磨损状态", max: 5, status: 1 },
              { text: "振动指标", max: 5, status: 1 },
            ],
            splitArea: {
              areaStyle: {
                color: ["#F6F6F6", "#F6F6F6", "#F6F6F6", "#fff"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#eee",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#eee",
              },
            },
            radius: "60%",
            startAngle: 90,
            splitNumber: 4,
            name: {
              formatter: function (name, item) {
                // let r = Math.round(Math.random());
                // let status = item.status == 1 ? "正常" : "异常";
                let status = item.msg || "";
                return `{a|${name}}\n{${
                  item.status == 1 ? "default" : "warning"
                }|${status}}`;
              },
              rich: {
                a: {
                  color: "#333333",
                  textAlign: "center",
                  fontSize: 15,
                  lineHeight: 24,
                  align: "center",
                },
                warning: {
                  color: "#F7BD3C",
                  textAlign: "center",
                  align: "center",
                },
                default: {
                  color: "#999999",
                  textAlign: "center",
                  align: "center",
                },
              },
            },
          },
        ],
        series: [
          {
            name: "雷达图",
            type: "radar",
            symbol: "none",
            emphasis: {
              lineStyle: {
                width: 4,
              },
            },
            areaStyle: {
              normal: {
                color: "rgba(63,125,255,0.25)",
              },
            },
            data: [
              {
                // value: [60, 70, 55, 63, 40],
                value: [],
                name: "数据",
              },
            ],
          },
        ],
      },
      warningList: [],
    };
  },
  computed: {
    iconStar() {
      let s = this.radarData ? this.radarData.score : "";
      let i =
        s == "-" || s >= 70
          ? "fenshu_blue.png"
          : s >= 40
          ? "fenshu_green.png"
          : "fenshu_red.png";
      return imgBaseUrlV2 + i;
    },
    iconClass() {
      let s = this.radarData ? this.radarData.score : "";
      let i = s == "-" || s >= 70 ? "primary" : s >= 40 ? "warning" : "danger";
      return i;
    },
  },
  methods: {
    transValue(v) {
      let tv = v + "";
      if (tv.indexOf(".") === -1) return v;
      let n = Number(v) || 0;
      return Number(n.toFixed(3));
    },
    getDeviceMonitoringData() {
      if (!this.device_id) return;
      return getDeviceMonitoringData({
        device_id: this.device_id,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "获取综合概况数据失败");
          }
          let data = res.data.data || [];
          this.indicators = data
            .filter((i) => {
              return i.index;
            })
            .map((i) => {
              let new_value = this.transValue(i.new_value);
              let set_value = this.transValue(i.set_value);
              return {
                ...i,
                new_value,
                set_value,
              };
            });
          console.log(this.indicators, "?indicators");
        })
        .catch((err) => {});
    },
    initChart() {
      // return false;
      this.$refs.chart &&
        this.$refs.chart.init((config) => {
          const { canvas } = config;
          const chart = echarts.init(canvas, null, config);
          canvas.setChart(chart);
          chart.setOption(this.option);
          this.chart = chart;
          console.log("init chart basee");
          // 需要把 chart 返回
          return chart;
        });
    },
    getDeviceRadarData() {
      return;
      return getDeviceRadarData({
        device_id: this.device_id,
      })
        .then(({ data: res }) => {
          if (res.code !== this.$ERR_OK) {
            return;
          }
        })
        .catch((err) => {});
    },
    onClickExpand() {
      this.expand = !this.expand;
    },
    computedExpand() {
      // return;
      if (!this.query) {
        this.query = uni.createSelectorQuery().in(this);
      }
      this.query
        .select("#equimentBaseContent")
        .boundingClientRect((data) => {
          if (data && data.height > 66) {
            this.showExpand = true;
          }
        })
        .exec();
    },
    pageScroll() {
      return new Promise((r) => {
        // return;
        if (!this.query) {
          this.query = uni.createSelectorQuery().in(this);
        }

        this.query
          .select("#equiment-detail-chart")
          .boundingClientRect((data) => {
            r(data);
          })
          .exec();
      });
    },
    getDeviceWarningValue() {
      return getDeviceWarningValue({
        device_id: this.device_id,
      })
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return;
          }
          let data = res.data;
          let list = [];
          if (typeof data === "object") {
            let message;
            for (let i in data) {
              message = data[i] || "";
              message = message.replace("，请留意", "");
              list.push({
                key: i,
                message,
              });
            }
          }
          this.warningList = list;
          console.log(res, "?getDeviceWarningValue");
        })
        .catch((err) => {});
    },
    resetOption() {
      let r = this.radarData;

      // let { conclusion, jcgk, mszt, sfgj, yyzb, zdzb } = res.data;
      let arr = [r.jcgk, r.yyzb, r.sfgj, r.mszt, r.zdzb];
      this.option.radar[0].indicator = this.option.radar[0].indicator.map(
        (i, idx) => {
          let s = arr[idx].msg == "-" || arr[idx].value >= 4;
          console.log(s, "?s");
          return {
            ...i,
            ...arr[idx],
            status: s ? 1 : 2, //arr[idx].status
          };
        }
      );

      this.option.series[0].data[0].value = arr.map((i) =>
        i.value == "-" || !i.value ? 0 : i.value
      );
      console.log(this.option, "?  this.option.series", arr);
      if (this.$refs.chart && this.chart) {
        return this.$refs.chart.setOption(this.option);
      }
    },
  },
  mounted() {
    this.computedExpand();
    this.getDeviceRadarData();
    this.getDeviceWarningValue();
    if (this.device_id) {
      this.getDeviceMonitoringData();
      this.getDeviceRadarData();
    }
  },
  watch: {
    device_id(n, o) {
      console.log(arguments, "?ar2");
      if (n !== o) {
        this.getDeviceMonitoringData();
        this.getDeviceRadarData();
      }
    },
    radarData(n, o) {
      if (n && n !== o) {
        this.resetOption();
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.base {
  .card {
    background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
    border-radius: 10px;
	color: #ffffff;
    .bold {
      font-family: PingFangSC-Regular;
      font-weight: 700;
    }
  }
}
.data-info {
	background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
	border-radius: 10px;
	color: #ffffff;
	.tabel {
		font-weight: 700;
		font-size: 28rpx;
		color : #ffffff;
	}
  }
.title {
  display: flex;
  font-size: 30rpx;
  font-family: PingFangSC-Regular;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 30rpx;
  align-items: center;

  >.text {
    flex: 1;
  }

  >.star {
    position: relative;
    display: flex;
    width: 100rpx;
    height: 100rpx;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;

    &.primary {
      color: color-active;
    }

    &.warning {
      color: color-warning;
    }

    &.danger {
      color: color-danger;
    }

    >.icon {
      position: absolute;
      width: 100rpx;
      height: 100rpx;
    }

    >.star-text {
      font-size: 24rpx;
    }
  }
}

.no-data-box {
  padding: 162rpx 0 80rpx;
}

.indicator {
  display: flex;
  flex-wrap: wrap;
  padding: 0;

  >.item {
    display: flex;
    flex-direction: column;
    width: 340rpx;
    min-height: 190rpx;
    margin-right: 22rpx;
    margin-top: 20rpx;
    align-items: center;
    justify-content: center;
    padding: 16rpx;

    >.num {
      display: flex;
      width: 100%;
      color: color-default;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      align-items: center;
      justify-content: center;
      line-height: 1;

      &.danger {
        color: color-danger;
      }

      &.success {
        color: color-success;
      }

      >.icon {
        display: flex;
        width: 32rpx;
        height: 32rpx;
        margin-left: 12rpx;
        margin-top: 2rpx;
      }
    }

    >.name {
      width: 100%;
      text-align: center;

      >.display_name {
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: color-default;
        line-height: 1;
        no-wrap();
      }

      >.desc {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 1;
        padding: 18rpx 0;
      }
    }

    &:nth-child(2n) {
      margin-right: 0;
    }

    &:nth-child(-n + 2) {
      margin-top: 0;
    }
  }
}

.chart {
  height: 550rpx;
  margin-bottom: 0;
}
</style>